<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>造数据</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>
    <script src="https://unpkg.com/vue"></script>
    <script>
        Date.prototype.Format = function (fmt) { //author: meizz
            var o = {
                "M+": this.getMonth() + 1, //月份
                "d+": this.getDate(), //日
                "h+": this.getHours(), //小时
                "m+": this.getMinutes(), //分
                "s+": this.getSeconds(), //秒
                "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                "S": this.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }
    </script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        td {
            padding: 5px;
        }
        input {
            display: inline-block;
            margin-left: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <button class="btn btn-info" v-on:click="addMatch">添加</button>
    <button class="btn btn-danger" v-on:click="modifyMatch">修改</button>
    <table>
        <thead></thead>
        <tbody>
        <tr><td>主队名称</td><td><input v-model="match.hostName"/></td></tr>
        <tr><td>客队名称</td><td><input v-model="match.guestName"/></td></tr>
        <tr><td>比赛开始时间</td><td><input v-model="match.matchStartTime"/></td></tr>
        <tr><td>比赛状态</td><td><input v-model="match.matchStatus"/></td></tr>
        <tr><td>比赛开始时间</td><td><input v-model="match.matchHalfStartTime"/></td></tr>
        <tr><td>主队得分</td><td><input v-model="match.hostScore"/></td></tr>
        <tr><td>客队得分</td><td><input v-model="match.guestScore"/></td></tr>
        <tr><td>全场赛果</td><td><input v-model="match.wdl"/></td></tr>
        </tbody>
    </table>
    <button class="btn btn-danger" v-on:click="addBowlOdds">添加滚球赔率</button>
    <table>
        <thead></thead>
        <tbody>
        <tr><td>滚球全场赛果</td><td><input v-model="match.odds"/></td></tr>
        <tr><td>滚球让球</td><td><input v-model="match.chandicap" placeholder="盘口"></td><td><input v-model="match.codds"/></td></tr>
        <tr><td>滚球大小球</td><td><input v-model="match.mlhandicap"/></td><td><input v-model="match.mlodds"/></td></tr>
        <tr><td>主队得分</td><td><input v-model="match.hostScore"/></td></tr>
        <tr><td>客队得分</td><td><input v-model="match.guestScore"/></td></tr>
        <tr><td>是否封盘</td><td><input v-model="match.isBlocked"/></td></tr>
        </tbody>
    </table>
</div>
</body>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            match: {
                hostName: "主队",
                guestName: "客队",
                matchStartTime: new Date().Format('yyyy-MM-dd hh:mm:ss'),
                matchHalfStartTime: new Date().Format('yyyy-MM-dd hh:mm:ss'),
                matchStatus: '未开始',
                hostScore: 2,
                guestScore: 1,
                wdl: '2.85,3.24,2.54',
                odds: '2.85,3.24,2.54',
                isBlocked: 0,
                chandicap: '4',
                codds: '1.2,2.0',
                mlhandicap: '0/0.5',
                mlodds: '2.0,1.1'
            }
        },
        methods: {
            addMatch: function() {
                $.post('/cq/test/addMatch', this.match, function (res) {
                    console.log(res.message)
                })
            },
            modifyMatch: function() {
                $.post('/cq/test/modifyMatch', this.match, function (res) {
                    console.log(res.message)
                })
            },
            addBowlOdds: function () {
                $.post('/cq/test/addBowlOdds', this.match, function (res) {
                    console.log(res.message)
                })
            }
        }
    })
</script>

<script>
    // document.getElementById('lll').getElementsByClassName('nameCon').forEach(function (value) {
    //     console.log(value.getElementsByClassName('name')[0].innerHTML)
    // })
    var elem = document.createElement('button');
    elem.innerHTML = '点击';
    elem.addEventListener('click', function() {
        var tags = document.getElementById('all_comment').getElementsByClassName('nameCon');
        var length = tags.length;
        var str = '';
        for (var i = 0; i < length; i++) {
            var nickname = tags[i].getElementsByClassName('name')[0].innerHTML;
            console.log(nickname);
            str += nickname + "<br>";
        }
        var nicknames = document.getElementById('nicknames');
        nicknames.innerHTML = str;
    });
    document.getElementById('main').appendChild(elem);
    var nickNames = document.createElement('div');
    nickNames.id = 'nicknames';
    document.getElementById('main').appendChild(nickNames);
</script>
</html>